<template>
  <div>
    <p>商品清单如下：</p>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <span>{{ obj.shopName }}</span>
        <span>{{ obj.price }}元/份</span>
      </li>
    </ul>
    <p>请输入购买数量：</p>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <span>{{ obj.shopName }}</span>
        <span>
          <button @click="addFn(index)">+</button>
          <span>{{ obj.count }}</span>
          <button @click="subFn(index)">-</button>
        </span>
      </li>
    </ul>
    <p>总价为：{{ sum.toFixed(2) }}</p>
  </div>
</template>

<script>
export default {
  props: ["arr"],
  methods: {
    addFn(index) {
      this.$emit("add", index);
    },
    subFn(index) {
      this.$emit("sub", index);
    },
  },
  computed: {
    sum() {
      return this.arr.reduce((sum, obj) => (sum += obj.count * obj.price), 0);
    },
  },
};
</script>

<style>
</style>